<template>
	<view class="amap-container">
		<!-- <view :prop="markerList" id="amap"></view> -->
		<view :prop="markerList" :change:prop="amap.receiveMsg" id="amap">
		</view>
	</view>
</template>

<script>
	const start = 'static/home/marker.png'

	export default {
		data() {
			return {
				list: [],
				dataIndex: ''
			}
		},
		props: {
			lng: {
				type: String,
				default: ''
			},
			lat: {
				type: String,
				default: ''
			}
		},
		computed: {
			markerList() {
				return this.list
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getMapData()
			})
		},
		methods: {
			getMapData() {
				this.list = [{
					lat: this.lat,
					lng: this.lng,
					icon: start
				}]
			}
		}
	}
</script>
<!-- render.js -->
<script module="amap" lang="renderjs">
	import config from '../../config/productions.js'
	export default {
		data() {
			return {
				map: null,
				myData: [],
			}
		},
		methods: {
			receiveMsg(newValue, oldValue, ownerInstance, instance) {
				if (newValue.length != 0) {
					this.myData = newValue[0]
					this.init()
				}
			},
			// 引入高德地图SDK
			init() {
				if (typeof window.AMap == 'function') {
					this.initAmap();
				} else {
					// 动态引入较大类库避免影响页面展示
					const script = document.createElement('script');
					script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + config.WEBAK;
					script.onload = this.initAmap.bind(this);
					document.head.appendChild(script);
				}
			},
			initAmap() {
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: [this.myData.lng, this.myData.lat],
					zoom: 16
				})

				this.initMarkers()
			},
			//初始化标记点
			initMarkers() {
				let prevMarker = null
				let prevIcon = null
				// this.markerList.forEach((item, index) => {

					// if (!!item.icon) {
						//添加点标记
						let marker = new AMap.Marker({
							position: new AMap.LngLat(this.myData.lng, this.myData.lat),
							offset: new AMap.Pixel(-13, -30),
							icon: 'static/home/marker.png',
						})

						this.map.add(marker)
					// }

				// })
			}
		}
	}
</script>
<!-- <script module="amap" lang="renderjs">
	import config from '@/config/index.js'

	export default {
		data() {
			return {
				map: null,
				ownerInstanceObj: null //service层对象
			}
		},
		props: {
			zoom: {
				type: Number,
				default: ''
			},
			lng: {
				type: String,
				default: ''
			},
			lat: {
				type: String,
				default: ''
			}
		},
		mounted() {
			if (typeof window.AMap === 'function') {
				this.initAmap()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + config.WEBAK
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initAmap() {
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: [this.lng, this.lat],
					zoom: 13
				})

				this.initMarkers()
			},
			//初始化标记点
			initMarkers() {
				let prevMarker = null
				let prevIcon = null
				this.markerList.forEach((item, index) => {

					if (!!item.icon) {
						//添加点标记
						let marker = new AMap.Marker({
							position: new AMap.LngLat(item.lng, item.lat),
							offset: new AMap.Pixel(-13, -30),
							icon: item.icon,
						})

						this.map.add(marker)
					}

				})
			}
		}
	}
</script> -->

<style lang="scss" scoped>
	#amap {
		width: 100%;
		height: 400rpx;
		pointer-events: none;
	}

	.infoWindow-wrap {
		margin-left: 50px;
		color: #f00;
	}
</style>